<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../public/css/base.css">
    <link rel="stylesheet" href="../public/css/header.css">
    <link rel="stylesheet" href="../public/css/playlistDetail.css">
    <link rel="stylesheet" href="../public/css/pagination.css">
    <link rel="stylesheet" href="../public/css/footer.css">
</head>

<body>

    <!-- 顶部导航条 -->
    <header class="header">
        <div class="m-top">
            <div class="wrap f-nb">
                <div class="l-top">
                    <h1><a href="#" class="logo">网易云音乐</a></h1>
                    <div class="n-top">
                        <ul class="m-nav">
                            <li>
                                <span>

                                    <a href="#" class="fst">发现音乐</a>
                                    <sup class="sanjiao show"></sup>
                            </li>
                            <li>
                                <a href="#">我的音乐</a>
                                <sup class="sanjiao hide"></sup>
                            </li>
                            <li><a href="#">朋友</a></li>
                            <li><a href="#">商城</a></li>
                            <li>
                                <a href="#">音乐人</a>
                            </li>
                            <li class="download_c">
                                <a href="#">下载客户端</a>
                                <sup class="sanjiao hide"></sup>
                                <sup class="hot">&nbsp;</sup>
                            </li>
                        </ul>

                    </div>

                </div>
                <div class="r-top">
                    <div class="log"><a href="#" class="login">登录</a></div>
                    <a href="#" class="creater">创作者中心</a>
                    <div class="search">
                        <span class="parent">
                            <input type="text" class="s_btn" placeholder="音乐/视频/电台/用户">
                        </span>
                    </div>
                </div>
            </div>

        </div>
        <div class="subnav">
            <div class="wrap f-pr">
                <ul class="nav">
                    <li>
                        <a href="./index.html" class="">
                            &nbsp;&nbsp;推荐&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;排行榜&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="./playlist.html" class="songList">
                            &nbsp;&nbsp;歌单&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;主播电台&nbsp;&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;歌手&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;新碟上架&nbsp;&nbsp;
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 内容 -->
    <div class="content_wrap">
        <div class="content_left">
            <div class="music_top clearfix">
                <div class="dj_img">
                    <div class="mkb">
                        <img src="" alt="">
                    </div>
                </div>
                <div class="dj_info clearfix">
                    <div class="dj_info_title">
                        <i class="dj_info_title_logo">
                            <span></span>
                        </i>
                    </div>
                    <div class="user_ifn">
                        <div class="user_h_img">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </div>
                        <a href="#" class="user_name"></a>
                        <p class="created_time">2021-06-26 创建</p>
                    </div>
                    <div class="action_buttons clearfix">
                        <a href="#" class="play_btn">
                            <span class="btn2">
                                <em class="play_img btn2"></em>
                                播放</span>
                        </a>
                        <a href="#" class="addto_btn btn2"></a>
                        <a href="#" class="collection btn2">
                            <span class="btn2">()</span>
                        </a>
                        <a href="#" class="share btn2">
                            <span class="btn2">()</span>
                        </a>
                        <a href="#" class="down_btn btn2">
                            <span class="btn2">下载</span>
                        </a>
                        <a href="#" class="pl_btn btn2">
                            <span class="btn2">(375)</span>
                        </a>
                    </div>
                    <div class="tags clearfix">
                        <span>标签：</span>
                        <div class="tagsLi">
                            <!-- <a href="#" class="btn2">
                                <span class="btn2">韩语</span>
                            </a>
                            <a href="#" class="btn2">
                                <span class="btn2">韩语</span>
                            </a>
                            <a href="#" class="btn2">
                                <span class="btn2">韩语</span>
                            </a> -->
                        </div>
                    </div>
                    <div class="album_desc">
                        <span>介绍：</span>
                        <!-- <span>TVING 恋爱综艺 换乘恋爱</span> -->
                    </div>
                    <div>
                        <a href="javascript:;" class="showMore"><span class="spanMAL">展开</span><i
                                class="jiantou jiantou_h"></i></a>
                    </div>
                </div>
            </div>
            <div class="n-songtb">
                <div class="n-songtb_title">
                    <h3>歌曲列表</h3>
                    <span class="songNum">474首歌</span>
                    <div class="playNum">播放：<span>450095</span>次</div>
                    <div class="out_link">
                        <i></i>
                        <a href="#" class="out-link">生成外链播放器</a>
                    </div>
                </div>
                <table class="songList_table">
                    <thead>
                        <tr>
                            <th class="first_w1">
                                <div class="wp">&nbsp;</div>
                            </th>
                            <th class="w2">
                                <div class="wp af0"></div>
                            </th>
                            <th class="w3">
                                <div class="wp af1"></div>
                            </th>
                            <th class="w4">
                                <div class="wp af2"></div>
                            </th>
                            <th class="w5">
                                <div class="wp af3"></div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div class="nowDown">
                    <p>查看更多内容，请下载客户端</p>
                    <a href="#">立即下载</a>
                </div>
                <div class="comments_wrap">
                    <div class="comments">
                        <div class="c_title">
                            <h3>评论</h3>
                            <span class="songNum">共383条评论</span>
                        </div>
                        <div class="comments_contents">
                            <div class="user_comments">
                                <div class="headI">
                                    <img src="https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
                                        alt="">
                                </div>
                                <div class="comment_area">
                                    <textarea name="" id="status" placeholder="评论"></textarea>
                                    <div class="corr u-arr"><em class="arrline">◆</em><span class="arrclr">◆</span>
                                    </div>
                                    <div class="user_comments_bottom">
                                        <a href="javascript:;" class="pull-right">评论</a>
                                        <span class="pull-right" id="counter">140</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 精彩评论 -->
                        <div class="good_comments_wrap clearfix">
                            <h3>精彩评论</h3>
                            <div id="155855841633265709748" class="itm" data-id="15585584">
                                <div class="head"><a href="/user/home?id=39830029"><img
                                            src="https://p1.music.126.net/E12w3dmCz4S0-wA1Jsee-w==/109951164552840704.jpg?param=50y50"></a>
                                </div>
                                <div class="cntwrap">
                                    <div class="">

                                    </div>
                                    <div class="rp">
                                        <div class="time s-fc4"></div>
                                        <span class="dlt">
                                            <span style="display: none;" class="j-delete-comment">
                                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                                    data-type="delete">删除</a>
                                                <span class="sep">|</span>
                                            </span></span>
                                        <a data-id="15585584" class="likeNum" data-type="like"
                                            href="javascript:void(0)">
                                            <i class="zan u-icn2 u-icn2-12"></i> (495)</a>
                                        <span class="sep">|</span>
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                            <div id="155855841633265709748" class="itm" data-id="15585584">
                                <div class="head"><a href="/user/home?id=39830029"><img
                                            src="https://p1.music.126.net/E12w3dmCz4S0-wA1Jsee-w==/109951164552840704.jpg?param=50y50"></a>
                                </div>
                                <div class="cntwrap">
                                    <div class="">

                                    </div>
                                    <div class="que f-brk f-pr s-fc3">
                                        <span class="darr">
                                            <i class="bd">◆</i>
                                            <i class="bg">◆</i>
                                        </span>
                                        <a class="s-fc7"
                                            href="/user/home?id=47514954">P橙紫</a>：本来对张国荣感觉还不错，舞台风格没话说，现在被脑残粉弄得听到哥哥都想吐，什么歌都来个只认哥哥，感情全香港的好歌就你家哥哥唱的好听。
                                    </div>
                                    <div class="rp">
                                        <div class="time s-fc4">2015年4月18日</div>
                                        <span class="dlt">
                                            <span style="display: none;" class="j-delete-comment">
                                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                                    data-type="delete">删除</a>
                                                <span class="sep">|</span>
                                            </span></span>
                                        <a data-id="15585584" class="likeNum" data-type="like"
                                            href="javascript:void(0)">
                                            <i class="zan u-icn2 u-icn2-12"></i> (495)</a>
                                        <span class="sep">|</span>
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 最新评论 -->
                        <div class="new_comments_wrap">
                            <h3>最新评论(736)</h3>
                            <div id="155855841633265709748" class="itm" data-id="15585584">
                                <div class="head"><a href="/user/home?id=39830029"><img
                                            src="https://p1.music.126.net/E12w3dmCz4S0-wA1Jsee-w==/109951164552840704.jpg?param=50y50"></a>
                                </div>
                                <div class="cntwrap">
                                    <div class="">
                                        <div class="cnt f-brk"><a href="/user/home?id=39830029"
                                                class="s-fc7">天马行空-MAZHENYU</a>：整天哥哥哥哥的，叫多了烦。粤语歌连许冠杰，校长都没。<img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_97.png"></div>
                                    </div>
                                    <div class="rp">
                                        <div class="time s-fc4">2015年4月18日</div>
                                        <span class="dlt">
                                            <span style="display: none;" class="j-delete-comment">
                                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                                    data-type="delete">删除</a>
                                                <span class="sep">|</span>
                                            </span></span>
                                        <a data-id="15585584" class="likeNum" data-type="like"
                                            href="javascript:void(0)">
                                            <i class="zan u-icn2 u-icn2-12"></i> (495)</a>
                                        <span class="sep">|</span>
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                            <div id="155855841633265709748" class="itm" data-id="15585584">
                                <div class="head"><a href="/user/home?id=39830029"><img
                                            src="https://p1.music.126.net/E12w3dmCz4S0-wA1Jsee-w==/109951164552840704.jpg?param=50y50"></a>
                                </div>
                                <div class="cntwrap">
                                    <div class="">
                                        <div class="cnt f-brk"><a href="/user/home?id=39830029"
                                                class="s-fc7">天马行空-MAZHENYU</a><img class="vip_img"
                                                src="//p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4213923139/f08a/c6ea/10ee/f7e2deef21937a1042e370c47525c956.png"
                                                class="brand-tag brand-vip">：看了评论也只有一个人说千千阙歌只认哥哥呀，哪里来的什么歌都只认哥哥？而且个人有个人的喜好，那个评论也只是说他自己只认哥哥，并没有喷别人的版本啊，相信很多人对于某一首歌都有自己偏爱的版本，这是多正常的一件事。<img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_357.png"><img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_357.png">理解万岁
                                        </div>
                                    </div>
                                    <div class="que f-brk f-pr s-fc3">
                                        <span class="darr">
                                            <i class="bd">◆</i>
                                            <i class="bg">◆</i>
                                        </span>
                                        <a class="s-fc7"
                                            href="/user/home?id=47514954">P橙紫</a>：本来对张国荣感觉还不错，舞台风格没话说，现在被脑残粉弄得听到哥哥都想吐，什么歌都来个只认哥哥，感情全香港的好歌就你家哥哥唱的好听。
                                    </div>
                                    <div class="rp">
                                        <div class="time s-fc4">2015年4月18日</div>
                                        <span class="dlt">
                                            <span style="display: none;" class="j-delete-comment">
                                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                                    data-type="delete">删除</a>
                                                <span class="sep">|</span>
                                            </span></span>
                                        <a data-id="15585584" class="likeNum" data-type="like"
                                            href="javascript:void(0)">
                                            <i class="zan u-icn2 u-icn2-12"></i> (495)</a>
                                        <span class="sep">|</span>
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="paging-wrap">
                <center>
                    <div class="box" id="wrap1"></div>
                </center>
            </div>
        </div>
        <div class="content_right">
            <div class="content_box">
                <div class="likeSongPerson">
                    <h3>
                        喜欢这个歌单的人
                    </h3>
                    <ul class="m-piclist clearfix">
                        <li><a href="#">
                                <img src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                                    alt="">
                            </a>
                        </li>
                        <li><a href="#">
                                <img src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                                    alt="">
                            </a>
                        </li>
                        <li><a href="#">
                                <img src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                                    alt="">
                            </a>
                        </li>
                        <li><a href="#">
                                <img src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                                    alt="">
                            </a>
                        </li>
                        <li><a href="#">
                                <img src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                                    alt="">
                            </a>
                        </li>
                        <li><a href="#">
                                <img src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                                    alt="">
                            </a>
                        </li>
                        <li><a href="#">
                                <img src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                                    alt="">
                            </a>
                        </li>
                        <li><a href="#">
                                <img src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                                    alt="">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="hitSong">
                    <h3>
                        热门歌单
                    </h3>
                    <ul class="m-rctlist clearfix">
                        <li>
                            <div class="cver u-cover u-cover-3">
                                <a href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM" data-res-id="6827562995"
                                    data-res-type="13" data-res-action="log"
                                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"><img
                                        src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50">
                                </a>
                            </div>
                            <div class="info">
                                <p class="f-thide">
                                    <a class="sname f-fs1 s-fc0" href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM"
                                        data-res-id="6827562995" data-res-type="13" data-res-action="log"
                                        data-res-data="recommendclick|0||playlist-playlist-recommend|3455816">韩综 | 换乘恋爱
                                        BGM</a>
                                </p>
                                <p><span class="by s-fc4">by</span><a class="nm nm f-thide s-fc3"
                                        href="/user/home?id=111050645" title="咕噜咕噜v-">咕噜咕噜v-</a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="cver u-cover u-cover-3">
                                <a href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM" data-res-id="6827562995"
                                    data-res-type="13" data-res-action="log"
                                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"><img
                                        src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50">
                                </a>
                            </div>
                            <div class="info">
                                <p class="f-thide">
                                    <a class="sname f-fs1 s-fc0" href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM"
                                        data-res-id="6827562995" data-res-type="13" data-res-action="log"
                                        data-res-data="recommendclick|0||playlist-playlist-recommend|3455816">韩综 | 换乘恋爱
                                        BGM</a>
                                </p>
                                <p><span class="by s-fc4">by</span><a class="nm nm f-thide s-fc3"
                                        href="/user/home?id=111050645" title="咕噜咕噜v-">咕噜咕噜v-</a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="cver u-cover u-cover-3">
                                <a href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM" data-res-id="6827562995"
                                    data-res-type="13" data-res-action="log"
                                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"><img
                                        src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50">
                                </a>
                            </div>
                            <div class="info">
                                <p class="f-thide">
                                    <a class="sname f-fs1 s-fc0" href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM"
                                        data-res-id="6827562995" data-res-type="13" data-res-action="log"
                                        data-res-data="recommendclick|0||playlist-playlist-recommend|3455816">韩综 | 换乘恋爱
                                        BGM</a>
                                </p>
                                <p><span class="by s-fc4">by</span><a class="nm nm f-thide s-fc3"
                                        href="/user/home?id=111050645" title="咕噜咕噜v-">咕噜咕噜v-</a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="cver u-cover u-cover-3">
                                <a href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM" data-res-id="6827562995"
                                    data-res-type="13" data-res-action="log"
                                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"><img
                                        src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50">
                                </a>
                            </div>
                            <div class="info">
                                <p class="f-thide">
                                    <a class="sname f-fs1 s-fc0" href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM"
                                        data-res-id="6827562995" data-res-type="13" data-res-action="log"
                                        data-res-data="recommendclick|0||playlist-playlist-recommend|3455816">韩综 | 换乘恋爱
                                        BGM</a>
                                </p>
                                <p><span class="by s-fc4">by</span><a class="nm nm f-thide s-fc3"
                                        href="/user/home?id=111050645" title="咕噜咕噜v-">咕噜咕噜v-</a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="cver u-cover u-cover-3">
                                <a href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM" data-res-id="6827562995"
                                    data-res-type="13" data-res-action="log"
                                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"><img
                                        src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50">
                                </a>
                            </div>
                            <div class="info">
                                <p class="f-thide">
                                    <a class="sname f-fs1 s-fc0" href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM"
                                        data-res-id="6827562995" data-res-type="13" data-res-action="log"
                                        data-res-data="recommendclick|0||playlist-playlist-recommend|3455816">韩综 | 换乘恋爱
                                        BGM</a>
                                </p>
                                <p><span class="by s-fc4">by</span><a class="nm nm f-thide s-fc3"
                                        href="/user/home?id=111050645" title="咕噜咕噜v-">咕噜咕噜v-</a>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="m-multi">
                    <h3 class="u-hd3">
                        <span class="f-fl">网易云音乐多端下载</span>
                    </h3>
                    <ul class="bg clearfix">
                        <li><a data-res-action="bilog" data-log-action="downloadapp"
                                data-log-json="{&quot;type&quot;:&quot;iPhone&quot;,&quot;source&quot;:&quot;detail&quot;}"
                                href="https://itunes.apple.com/cn/app/id590338362" class="ios" hidefocus="true"
                                target="_blank">iPhone</a></li>
                        <li><a data-res-action="bilog" data-log-action="downloadapp"
                                data-log-json="{&quot;type&quot;:&quot;pc&quot;,&quot;source&quot;:&quot;detail&quot;}"
                                href="https://music.163.com/api/pc/download/latest" class="pc" hidefocus="true"
                                target="_blank">PC</a></li>
                        <li><a data-res-action="bilog" data-log-action="downloadapp"
                                data-log-json="{&quot;type&quot;:&quot;android&quot;,&quot;source&quot;:&quot;detail&quot;}"
                                href="https://music.163.com/api/android/download/latest2" class="aos" hidefocus="true"
                                target="_blank">Android</a></li>
                    </ul>
                    <p class="s-fc4">同步歌单，随时畅听320k好音乐</p>
                </div>
            </div>
        </div>
    </div>

    </div>

    <!-- 底部 -->
    <footer class="footer">
        <div class="f-ft">
            <div class="copy">
                <p class="link">
                    <a href="#">服务条款</a>
                    <span class="line">|</span>
                    <a href="#">隐私政策</a>
                    <span class="line">|</span>
                    <a href="#">儿童隐私政策</a>
                    <span class="line">|</span>
                    <a href="#">版权投诉指引</a>
                    <span class="line">|</span>
                    <a href="#">意见反馈</a>
                    <span class="line">|</span>
                    <a href="#">广告合作</a>
                </p>
                <p class="shangbiaoTemp">网易公司版权所有©1997-2021&nbsp;&nbsp;&nbsp;&nbsp;杭州乐读科技有限公司运营：<a href="#">浙网文[2021]
                        1186-054号</a></p>
                <p class="shangbiaoTemp">违法和不良信息举报电话：0571-89853516&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;举报邮箱：<a
                        href="#">ncm5990@163.com</a></p>
                <p class="shangbiaoTemp"><a href="#">粤B2-20090191-18 工业和信息化部备案管理系统网站</a> &nbsp;&nbsp;&nbsp;<a
                        href="#"><span class="police"></span> 浙公网安备 33010902002564号</a></p>
            </div>
            <ul class="enter">
                <li>
                    <a href="#" class="f_logo f_logo_1"></a>
                    <span class="f_span f_span_1"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_2"></a>
                    <span class="f_span f_span_2"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_3"></a>
                    <span class="f_span f_span_3"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_4"></a>
                    <span class="f_span f_span_4"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_5"></a>
                    <span class="f_span f_span_5"></span>
                </li>
            </ul>
        </div>
    </footer>

</body>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../public/js/playListDetail.js"></script>
<script src="../public/js/playListCom.js"></script>
<script src="../public/js/com_pagination.js"></script>
<script type="text/javascript">
    var onPagechange = function (page) {
        console.log('当前点击页码', page);
        var temp = location.search.substring(1);
        var arr = temp.split('&');
        // 再把arr里面的数据以 = 分割
        var params = {}
        arr.forEach(el => {
            var result = el.split('=') //result[0] --> key
            params[result[0]] = result[1];
        })
        var id = params.id;
        let currentComPage = page;
        let limit = 20;
        let offset = (currentComPage - 1) * limit;
        // 最新评论

        let new_comments_wrap = $(`.new_comments_wrap`);
        $.ajax({
            url: 'http://localhost:3000/comment/playlist',
            data: {
                id: id,
                offset: offset
            },
            success: function (res) {
                sessionStorage.setItem('totalCom', res.total);
                new_comments_wrap.html(`<h3>最新评论(${res.total})</h3>`);
                res.comments.forEach(el => {
                    let time = el.time;

                    function getTime(time) {
                        let date = new Date(time);
                        let nowDate = new Date();
                        let nowYear = nowDate.getFullYear();
                        let year = date.getFullYear();
                        let month = date.getMonth();
                        let day = date.getDate();
                        date = date.getTime();
                        let dYear = nowYear - year;
                        let hour = Math.floor((date / 1000 / 60 / 60) % 24) + 8;
                        let min = Math.floor((date / 1000 / 60) % 60);

                        function format(val) {
                            return val < 10 ? '0' + val : val
                        };
                        hour = format(hour);
                        min = format(min);
                        if (dYear > 0) {
                            date = `${year}年${month}月${day}日 ${hour}:${min}`
                            return date
                        } else {
                            date = `${month}月${day}日 ${hour}:${min}`
                            return date
                        }
                    };
                    time = getTime(el.time);
                    if (el.beReplied.length == 0) {
                        new_comments_wrap.append(`<div id="${el.commentId}${el.time}" class="itm" data-id="${el.commentId}">
                    <div class="head"><a href="javascript:;"><img
                                src="${el.user.avatarUrl}"></a>
                    </div>
                    <div class="cntwrap">
                        <div class="">
                            <div class="cnt f-brk"><a href="javascript:;"
                                    class="s-fc7">${el.user.nickname}</a>：${el.content}</div>
                        </div>
                        <div class="rp">
                            <div class="time s-fc4">${time}</div>
                            <span class="dlt">
                                <span style="display: none;" class="j-delete-comment">
                                    <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                        data-type="delete">删除</a>
                                    <span class="sep">|</span>
                                </span></span>
                            <a data-id="15585584" class="likeNum" data-type="like"
                                href="javascript:void(0)">
                                <i class="zan u-icn2 u-icn2-12"></i> (${el.likedCount})</a>
                            <span class="sep">|</span>
                            <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                data-type="reply">回复</a>
                        </div>
                    </div>
                </div>`)
                    } else {
                        new_comments_wrap.append(`<div id="${el.commentId}${el.time}" class="itm" data-id="${el.commentId}">
                    <div class="head"><a href="javascript:;"><img
                                src="${el.user.avatarUrl}"></a>
                    </div>
                    <div class="cntwrap">
                        <div class="">
                            <div class="cnt f-brk"><a href="javascript:;"
                                    class="s-fc7">${el.user.nickname}</a>：${el.content}</div>
                        </div>
                            <div class="que f-brk f-pr s-fc3">
                                <span class="darr">
                                    <i class="bd">◆</i>
                                    <i class="bg">◆</i>
                                </span>
                                <a class="s-fc7" href="/user/home?id=47514954">${el.beReplied[0].user.nickname}</a>：${el.beReplied[0].content}。
                            </div>
                            <div class="rp">
                                <div class="time s-fc4">${time}</div>
                                <span class="dlt">
                                    <span style="display: none;" class="j-delete-comment">
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="delete">删除</a>
                                        <span class="sep">|</span>
                                    </span></span>
                                <a data-id="15585584" class="likeNum" data-type="like"
                                    href="javascript:void(0)">
                                    <i class="zan u-icn2 u-icn2-12"></i> (${el.likedCount})</a>
                                <span class="sep">|</span>
                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                    data-type="reply">回复</a>
                            </div>
                        </div>
                    </div>`)
                    }

                })

            }
        })

        // 精彩评论
        let good_comments_wrap = $('.good_comments_wrap')
        $.ajax({
            url: 'http://localhost:3000/comment/playlist',
            data: {
                id: id,
            },
            success: function (res) {
                console.log(res);
                sessionStorage.setItem('totalCom', res.total);
                good_comments_wrap.html('<h3>精彩评论</h3>');
                res.hotComments.forEach((el, index) => {
                    let time = el.time;

                    function getTime(time) {
                        let date = new Date(time);
                        let nowDate = new Date();
                        let nowYear = nowDate.getFullYear();
                        let year = date.getFullYear();
                        let month = date.getMonth();
                        let day = date.getDate();
                        date = date.getTime();
                        let dYear = nowYear - year;
                        let hour = Math.floor((date / 1000 / 60 / 60) % 24) + 8;
                        let min = Math.floor((date / 1000 / 60) % 60);

                        function format(val) {
                            return val < 10 ? '0' + val : val
                        };
                        hour = format(hour);
                        min = format(min);
                        if (dYear > 0) {
                            date = `${year}年${month}月${day}日 ${hour}:${min}`
                            return date
                        } else {
                            date = `${month}月${day}日 ${hour}:${min}`
                            return date
                        }
                    };
                    time = getTime(el.time);
                    if (el.beReplied.length == 0) {
                        good_comments_wrap.append(`<div id="${el.commentId}${el.time}" class="itm" data-id="${el.commentId}">
                    <div class="head"><a href="javascript:;"><img
                                src="${el.user.avatarUrl}"></a>
                    </div>
                    <div class="cntwrap">
                        <div class="">
                            <div class="cnt f-brk"><a href="javascript:;"
                                    class="s-fc7">${el.user.nickname}</a>：${el.content}</div>
                        </div>
                        <div class="rp">
                            <div class="time s-fc4">${time}</div>
                            <span class="dlt">
                                <span style="display: none;" class="j-delete-comment">
                                    <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                        data-type="delete">删除</a>
                                    <span class="sep">|</span>
                                </span></span>
                            <a data-id="15585584" class="likeNum" data-type="like"
                                href="javascript:void(0)">
                                <i class="zan u-icn2 u-icn2-12"></i> (${el.likedCount})</a>
                            <span class="sep">|</span>
                            <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                data-type="reply">回复</a>
                        </div>
                    </div>
                </div>`);

                    } else {
                        good_comments_wrap.append(`<div id="${el.commentId}${el.time}" class="itm" data-id="${el.commentId}">
                    <div class="head"><a href="javascript:;"><img
                                src="${el.user.avatarUrl}"></a>
                    </div>
                    <div class="cntwrap">
                        <div class="">
                            <div class="cnt f-brk"><a href="javascript:;"
                                    class="s-fc7">${el.user.nickname}</a>：${el.content}</div>
                        </div>
                            <div class="que f-brk f-pr s-fc3">
                                <span class="darr">
                                    <i class="bd">◆</i>
                                    <i class="bg">◆</i>
                                </span>
                                <a class="s-fc7" href="/user/home?id=47514954">${el.beReplied[0].user.nickname}</a>：${el.beReplied[0].content}。
                            </div>
                            <div class="rp">
                                <div class="time s-fc4">2015年4月18日</div>
                                <span class="dlt">
                                    <span style="display: none;" class="j-delete-comment">
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="delete">删除</a>
                                        <span class="sep">|</span>
                                    </span></span>
                                <a data-id="15585584" class="likeNum" data-type="like"
                                    href="javascript:void(0)">
                                    <i class="zan u-icn2 u-icn2-12"></i> (${el.likedCount})</a>
                                <span class="sep">|</span>
                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                    data-type="reply">回复</a>
                            </div>
                        </div>
                    </div>`);

                    }
                })
            }
        })
    }
    var currentPage = sessionStorage.setItem('currentComPage', 1);
    var obj = {
        wrapid: 'wrap1', //页面显示分页器容器id
        total: parseInt(sessionStorage.getItem('totalCom')), //总条数
        pagesize: 20, //每页显示10条
        currentPage: parseInt(currentPage), //当前页
        onPagechange: onPagechange,
        // btnCount: 7 //页数过多时，显示省略号的边界页码按钮数量，可省略，且值是大于5的奇数
    }
    pagination.init(obj);
</script>

<script>
    let album_desc = $('.album_desc');
    let showMore = $('.showMore');
    let spanMAL = $('.spanMAL');
    let jiantou = $('.jiantou');
    let flag = true;
    showMore.on('click', function () {
        flag ? album_desc.css('height', 'auto') : album_desc.css('height', '');
        flag ? jiantou.removeClass('jiantou_h').addClass('jiantou_s') : jiantou.removeClass('jiantou_s')
            .addClass('jiantou_h')
        flag = !flag
        flag ? spanMAL.html('展开') : spanMAL.html('收起');

    })
</script>

</html>